<template>
  <div v-if="showBadge" class="vip-user-badge" :class="badgeClass">
    <div class="badge-content">
      <CrownOutlined class="badge-icon" />
      <span class="badge-text">{{ badgeText }}</span>
    </div>
    <div class="badge-glow"></div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { CrownOutlined } from '@ant-design/icons-vue'
import { useLoginUserStore } from '@/stores/useLoginUserStore'

interface Props {
  position?: 'inline' | 'floating' | 'corner'
  size?: 'small' | 'medium' | 'large'
  showExpireInfo?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  position: 'inline',
  size: 'medium',
  showExpireInfo: false
})

const loginUserStore = useLoginUserStore()

// 获取用户VIP等级
const userVipLevel = computed(() => {
  return loginUserStore.loginUser?.vipLevel || 0
})

// 是否显示徽章
const showBadge = computed(() => {
  return userVipLevel.value > 0
})

// 徽章样式类
const badgeClass = computed(() => {
  const classes = []

  // VIP等级样式
  if (userVipLevel.value === 1) {
    classes.push('badge-vip')
  } else if (userVipLevel.value === 2) {
    classes.push('badge-svip')
  }

  // 位置样式
  classes.push(`badge-${props.position}`)

  // 大小样式
  classes.push(`badge-${props.size}`)

  return classes.join(' ')
})

// 徽章文本
const badgeText = computed(() => {
  if (userVipLevel.value === 1) return 'VIP'
  if (userVipLevel.value === 2) return 'SVIP'
  return ''
})

// 获取到期时间
const formatExpireTime = (expireTime: string) => {
  const date = new Date(expireTime)
  const now = new Date()
  const diffYears = (date.getTime() - now.getTime()) / (1000 * 60 * 60 * 24 * 365)
  if (diffYears > 80) return '永久有效'
  return date.toLocaleDateString('zh-CN')
}
</script>

<style scoped>
.vip-user-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  border-radius: 20px;
  font-weight: 600;
  transition: all 0.3s ease;
  user-select: none;
  overflow: hidden;
}

.badge-content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 12px;
  height: 100%;
}

.badge-glow {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: inherit;
  opacity: 0.3;
  transition: opacity 0.3s ease;
}

.badge-icon {
  font-size: inherit;
}

.badge-text {
  font-size: inherit;
  letter-spacing: 0.5px;
}

/* 大小变体 */
.badge-small {
  height: 20px;
  font-size: 10px;
  padding: 0 8px;
}

.badge-small .badge-content {
  gap: 2px;
  padding: 0 6px;
}

.badge-medium {
  height: 24px;
  font-size: 12px;
}

.badge-large {
  height: 32px;
  font-size: 14px;
  padding: 0 16px;
}

.badge-large .badge-content {
  gap: 6px;
  padding: 0 12px;
}

/* VIP等级样式 */
.badge-vip {
  background: linear-gradient(135deg, #ffd700, #ffed4e);
  color: #000;
  border: 1px solid rgba(255, 215, 0, 0.6);
  box-shadow: 0 2px 8px rgba(255, 215, 0, 0.3);
}

.badge-vip .badge-glow {
  background: linear-gradient(135deg, #ffd700, #ffed4e);
}

.badge-svip {
  background: linear-gradient(135deg, #8b5cf6, #ec4899);
  color: white;
  border: 1px solid rgba(139, 92, 246, 0.6);
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
}

.badge-svip .badge-glow {
  background: linear-gradient(135deg, #8b5cf6, #ec4899);
}

/* 位置变体 */
.badge-inline {
  position: static;
}

.badge-floating {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 100;
}

.badge-corner {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10;
}

/* 悬停效果 */
.vip-user-badge:hover {
  transform: translateY(-1px) scale(1.02);
}

.badge-vip:hover {
  box-shadow: 0 4px 12px rgba(255, 215, 0, 0.4);
}

.badge-vip:hover .badge-glow {
  opacity: 0.5;
}

.badge-svip:hover {
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);
}

.badge-svip:hover .badge-glow {
  opacity: 0.5;
}

/* 暗色模式适配 */
html[data-theme='dark'] .badge-vip {
  background: linear-gradient(135deg, #ffd700, #ffed4e);
  color: #000;
}

html[data-theme='dark'] .badge-svip {
  background: linear-gradient(135deg, #8b5cf6, #ec4899);
  color: white;
}
</style>




